<template>
  <div>
    <div class="title">我的购物车</div>
    <el-table
      :data="cartData"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center',color: 'white',backgroundColor:'#333'}"
      :cell-style="{ textAlign: 'center',fontSize: '10px',padding:'5px'}"
      :summary-method="getSummaries"
      show-summary>
      <el-table-column
        label="选择"
        width="180">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked" @change="handleEdit(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="productImage"
        label="商品"
        width="180">
        <template slot-scope="scope">
          <img :src="scope.row.productImage" alt="" style="width:60px; height:60px">
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="salePrice"
        label="价格">
      </el-table-column>
      <el-table-column
        label="数量">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.productNum" size="small" 
          @change="handleEdit(scope.row)" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="小计">
        <template slot-scope="scope">
         {{scope.row.salePrice*scope.row.productNum}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-checkbox v-model="checkAll">全选</el-checkbox>
  </div>
</template>

<script>
import UserHttp from '../../models/User'
  export default {
    data() {
      return {
        cartData:[],
        radio:'',
        multipleSelection: []
      }
    },
    async mounted() {
      var userId = '100000077'
      var res = await UserHttp.getCart(userId)
      this.cartData = res.data.res
    },
    computed:{
      checkAll:{
        get(){
          return this.cartData.every(item=>item.checked)
        },
        set(val){
          UserHttp.setAllChecked(val)
          this.cartData.forEach(item=>{
            item.checked = val
          })
        }
      }
    },
    methods:{
      getSummaries() {
        var sum=0
        if(this.cartData.length){
          this.cartData.forEach(item=>{
            if(item.checked == true){
              sum+=(item.salePrice*item.productNum)
            }
          })
        }
        return ['总价',sum]
      },
      handleDelete(val){
        var id = val._id
        this.$confirm('你确定要删除此条商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.cartData = this.cartData.filter(item=>item._id!=id)
          var res = await UserHttp.deleteCart(id)
          this.$message({
            type: 'success',
            message:res.data.msg
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      async handleEdit(val){
        var {_id,checked,productNum} = val
        await UserHttp.editCart({
          id:_id,
          checked,
          productNum
        })
      }
    }
  }
</script>

<style scoped>
.title{
  width: 100px;
  margin:20px auto;
}
</style>